<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件开发需求收集模板</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        h1 {
            margin: 0;
            font-size: 2.2rem;
        }
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-top: 10px;
        }
        .form-section {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }
        .form-section:hover {
            transform: translateY(-5px);
        }
        h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 0;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border 0.3s;
        }
        input:focus, textarea:focus, select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
        }
        .checkbox-item input {
            width: auto;
            margin-right: 8px;
        }
        .priority-buttons {
            display: flex;
            gap: 10px;
        }
        .priority-btn {
            flex: 1;
            padding: 10px;
            text-align: center;
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .priority-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        .actions {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        #resetBtn {
            background: #e74c3c;
            color: white;
        }
        #resetBtn:hover {
            background: #c0392b;
        }
        #exportBtn {
            background: #2ecc71;
            color: white;
        }
        #exportBtn:hover {
            background: #27ae60;
        }
        .required::after {
            content: " *";
            color: #e74c3c;
        }
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background: #2ecc71;
            color: white;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s;
            z-index: 1000;
        }
        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            .form-section {
                padding: 20px;
            }
            .priority-buttons {
                flex-direction: column;
            }
            .actions {
                flex-direction: column;
                gap: 10px;
            }
            button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>软件开发需求收集模板</h1>
            <p class="subtitle">全面收集项目信息，确保开发过程顺利高效</p>
        </header>
        
        <form id="requirementForm">
            <!-- 项目基本信息 -->
            <section class="form-section">
                <h2>项目基本信息</h2>
                <div class="form-group">
                    <label for="projectName" class="required">项目名称</label>
                    <input type="text" id="projectName" name="projectName" required>
                </div>
                <div class="form-group">
                    <label for="contactPerson" class="required">联系人</label>
                    <input type="text" id="contactPerson" name="contactPerson" required>
                </div>
                <div class="form-group">
                    <label for="contactInfo" class="required">联系方式</label>
                    <input type="text" id="contactInfo" name="contactInfo" placeholder="电话/邮箱" required>
                </div>
                <div class="form-group">
                    <label for="company">公司/组织</label>
                    <input type="text" id="company" name="company">
                </div>
            </section>
            
            <!-- 项目概述 -->
            <section class="form-section">
                <h2>项目概述</h2>
                <div class="form-group">
                    <label for="projectBackground" class="required">项目背景与目标</label>
                    <textarea id="projectBackground" name="projectBackground" placeholder="请描述项目的背景、解决的问题或实现的目标..." required></textarea>
                </div>
                <div class="form-group">
                    <label for="targetUsers" class="required">目标用户</label>
                    <textarea id="targetUsers" name="targetUsers" placeholder="请描述软件的目标用户群体及其特点..." required></textarea>
                </div>
                <div class="form-group">
                    <label for="existingProblems">当前存在的问题</label>
                    <textarea id="existingProblems" name="existingProblems" placeholder="如果是对现有工具的改进，请描述当前存在的问题..."></textarea>
                </div>
            </section>
            
            <!-- 功能需求 -->
            <section class="form-section">
                <h2>功能需求</h2>
                <div class="form-group">
                    <label for="coreFunctions" class="required">核心功能</label>
                    <textarea id="coreFunctions" name="coreFunctions" placeholder="请详细描述软件需要实现的核心功能..." required></textarea>
                </div>
                <div class="form-group">
                    <label for="specificFeatures">具体功能点</label>
                    <textarea id="specificFeatures" name="specificFeatures" placeholder="请列出具体的功能点，每个功能点一行..."></textarea>
                </div>
                <div class="form-group">
                    <label>功能优先级</label>
                    <div class="priority-buttons">
                        <div class="priority-btn" data-value="low">低优先级</div>
                        <div class="priority-btn" data-value="medium">中等优先级</div>
                        <div class="priority-btn active" data-value="high">高优先级</div>
                    </div>
                    <input type="hidden" id="priority" name="priority" value="high">
                </div>
            </section>
            
            <!-- 技术要求 -->
            <section class="form-section">
                <h2>技术要求</h2>
                <div class="form-group">
                    <label for="platform">运行平台</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="windows" name="platform" value="Windows">
                            <label for="windows">Windows</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="macos" name="platform" value="macOS">
                            <label for="macos">macOS</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="linux" name="platform" value="Linux">
                            <label for="linux">Linux</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="web" name="platform" value="Web">
                            <label for="web">Web浏览器</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="mobile" name="platform" value="Mobile">
                            <label for="mobile">移动设备</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="techPreference">技术偏好</label>
                    <textarea id="techPreference" name="techPreference" placeholder="是否有特定的技术栈、框架或语言要求？"></textarea>
                </div>
                <div class="form-group">
                    <label for="integration">集成需求</label>
                    <textarea id="integration" name="integration" placeholder="是否需要与其他系统、API或服务集成？"></textarea>
                </div>
            </section>
            
            <!-- 非功能需求 -->
            <section class="form-section">
                <h2>非功能需求</h2>
                <div class="form-group">
                    <label for="performance">性能要求</label>
                    <textarea id="performance" name="performance" placeholder="对响应速度、并发用户数等性能指标的要求..."></textarea>
                </div>
                <div class="form-group">
                    <label for="security">安全性要求</label>
                    <textarea id="security" name="security" placeholder="对数据安全、用户认证、权限控制等方面的要求..."></textarea>
                </div>
                <div class="form-group">
                    <label for="usability">易用性要求</label>
                    <textarea id="usability" name="usability" placeholder="对用户界面、操作流程、学习成本等方面的要求..."></textarea>
                </div>
            </section>
            
            <!-- 项目约束 -->
            <section class="form-section">
                <h2>项目约束</h2>
                <div class="form-group">
                    <label for="timeline">时间要求</label>
                    <input type="text" id="timeline" name="timeline" placeholder="期望的交付日期或里程碑">
                </div>
                <div class="form-group">
                    <label for="budget">预算范围</label>
                    <input type="text" id="budget" name="budget" placeholder="项目预算范围">
                </div>
                <div class="form-group">
                    <label for="constraints">其他约束</label>
                    <textarea id="constraints" name="constraints" placeholder="法律法规、合规性、资源限制等其他约束条件..."></textarea>
                </div>
            </section>
            
            <!-- 交付与支持 -->
            <section class="form-section">
                <h2>交付与支持</h2>
                <div class="form-group">
                    <label for="deliverables">交付物</label>
                    <textarea id="deliverables" name="deliverables" placeholder="期望的交付物（源代码、文档、安装包等）..."></textarea>
                </div>
                <div class="form-group">
                    <label for="maintenance">维护与支持</label>
                    <textarea id="maintenance" name="maintenance" placeholder="对后期维护、技术支持、培训等方面的要求..."></textarea>
                </div>
            </section>
            
            <div class="actions">
                <button type="button" id="resetBtn">重置表单</button>
                <button type="button" id="exportBtn">导出为Markdown</button>
            </div>
        </form>
        
        <footer>
            <p>© 2023 软件开发需求收集模板 | 设计用于提高需求收集效率</p>
        </footer>
    </div>
    
    <div class="notification" id="notification">Markdown文件已生成并开始下载</div>

    <script>
        // 优先级按钮交互
        document.querySelectorAll('.priority-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.priority-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                document.getElementById('priority').value = this.getAttribute('data-value');
            });
        });
        
        // 重置表单
        document.getElementById('resetBtn').addEventListener('click', function() {
            if (confirm('确定要重置表单吗？所有输入的内容将被清除。')) {
                document.getElementById('requirementForm').reset();
                document.querySelectorAll('.priority-btn').forEach(b => b.classList.remove('active'));
                document.querySelector('.priority-btn[data-value="high"]').classList.add('active');
                document.getElementById('priority').value = 'high';
            }
        });
        
        // 导出为Markdown
        document.getElementById('exportBtn').addEventListener('click', function() {
            // 收集表单数据
            const formData = new FormData(document.getElementById('requirementForm'));
            
            // 获取复选框的值
            const platforms = Array.from(document.querySelectorAll('input[name="platform"]:checked'))
                .map(cb => cb.value)
                .join('、');
            
            // 构建Markdown内容
            let markdownContent = `# ${formData.get('projectName') || '未命名项目'} 需求文档\n\n`;
            markdownContent += `**创建时间**: ${new Date().toLocaleString()}\n\n`;
            
            // 项目基本信息
            markdownContent += `## 项目基本信息\n\n`;
            markdownContent += `- **联系人**: ${formData.get('contactPerson') || '未填写'}\n`;
            markdownContent += `- **联系方式**: ${formData.get('contactInfo') || '未填写'}\n`;
            markdownContent += `- **公司/组织**: ${formData.get('company') || '未填写'}\n\n`;
            
            // 项目概述
            markdownContent += `## 项目概述\n\n`;
            markdownContent += `### 项目背景与目标\n${formData.get('projectBackground') || '未填写'}\n\n`;
            markdownContent += `### 目标用户\n${formData.get('targetUsers') || '未填写'}\n\n`;
            markdownContent += `### 当前存在的问题\n${formData.get('existingProblems') || '无'}\n\n`;
            
            // 功能需求
            markdownContent += `## 功能需求\n\n`;
            markdownContent += `### 核心功能\n${formData.get('coreFunctions') || '未填写'}\n\n`;
            markdownContent += `### 具体功能点\n${formData.get('specificFeatures') || '未填写'}\n\n`;
            markdownContent += `### 功能优先级\n${formData.get('priority') === 'high' ? '高优先级' : formData.get('priority') === 'medium' ? '中等优先级' : '低优先级'}\n\n`;
            
            // 技术要求
            markdownContent += `## 技术要求\n\n`;
            markdownContent += `### 运行平台\n${platforms || '未指定'}\n\n`;
            markdownContent += `### 技术偏好\n${formData.get('techPreference') || '无特殊要求'}\n\n`;
            markdownContent += `### 集成需求\n${formData.get('integration') || '无'}\n\n`;
            
            // 非功能需求
            markdownContent += `## 非功能需求\n\n`;
            markdownContent += `### 性能要求\n${formData.get('performance') || '无特殊要求'}\n\n`;
            markdownContent += `### 安全性要求\n${formData.get('security') || '无特殊要求'}\n\n`;
            markdownContent += `### 易用性要求\n${formData.get('usability') || '无特殊要求'}\n\n`;
            
            // 项目约束
            markdownContent += `## 项目约束\n\n`;
            markdownContent += `### 时间要求\n${formData.get('timeline') || '未指定'}\n\n`;
            markdownContent += `### 预算范围\n${formData.get('budget') || '未指定'}\n\n`;
            markdownContent += `### 其他约束\n${formData.get('constraints') || '无'}\n\n`;
            
            // 交付与支持
            markdownContent += `## 交付与支持\n\n`;
            markdownContent += `### 交付物\n${formData.get('deliverables') || '未指定'}\n\n`;
            markdownContent += `### 维护与支持\n${formData.get('maintenance') || '未指定'}\n\n`;
            
            // 创建并下载Markdown文件
            const blob = new Blob([markdownContent], { type: 'text/markdown' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${formData.get('projectName') || '软件需求'}_${new Date().toISOString().split('T')[0]}.md`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            // 显示通知
            const notification = document.getElementById('notification');
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        });
    </script>
</body>
</html>